<template>
    <el-card>
      <div slot="header" class="clearfix">
        <h4>报废申请单-新增</h4>
      </div>
      <el-row>
        <div>
        <el-row slot="content_context" type="flex" justify="end">
            <el-button type="primary" :loading="confirmLoading" @click="handleSubmit">提交审核</el-button>
            <el-button :loading="confirmLoading" @click="handleBack()">返回</el-button>
        </el-row>
        <el-row>
          <skus-table
            :table-height="500"
            :data-source="tableInfo.list"
            :loading="tableInfo.loading"
            :columns="tableInfo.columns"
          />
        </el-row>
      </div>
      </el-row>
    </el-card>
</template>

<script>

import SkusTable from '@/components/skusTable';
import {
  toCommitScrapRecordService,
  commitScrapRecordToOaService
} from '@api/stock/stockOverflowRecord';

export default {
  components: {
    SkusTable
  },
  data () {
    return {
      tableInfo: {
        list: [],
        columns: [],
        loading: false
      },
      confirmLoading: false,
      idList: []
    };
  },
  created () {
    this.idList = this.$route.params.idList;
    this.tableInfo.columns = [
      {
        title: '商品代码',
        key: 'skuNo',
      },
      {
        title: '商品名称',
        key: 'productName',
      },
      {
        title: '规格型号',
        key: 'specialDetail',
      }, {
        title: '计量单位',
        key: 'unitName',
      },
      {
        title: '件装数量',
        key: 'pieceAmount',
        width: 90
      },
      {
        title: '可售库存数量',
        key: 'canSendAmount',
      },
      {
        title: '成本价',
        key: 'costPrice',
      },
      {
        title: '仓位',
        key: 'stockName',
      },
      {
        title: '预计报废数量',
        type: 'input',
        width: 160,
        key: 'scrapNum',
        render: (h, { row }) => {
          return <el-input-number onChange={() => { this.scrapNumChange(row) }} controls={ false }
            v-model={row.scrapNum} min={0} max={row.canSendAmount}
            precision={row.decimalPlaces} />
        }
      },
      {
        title: '报废金额',
        key: 'scrapAmount',
      },
      {
        title: '预计报废日期',
        key: 'planSolveDate',
      },
      {
        title: '积压产生原因',
        key: 'causes',
      },
      {
        title: '产生原因备注',
        key: 'causesRemark',
      },
      {
        title: '填写人',
        key: 'causesCreater',
      },
      {
        title: '处理备注',
        key: 'processRemark',
      }
    ];
    this.loadTableData();
  },
  methods: {
    async loadTableData () {
      if (this.idList.length === 0) {
        return this.$message.error('请选择数据');
      }
      const res = await toCommitScrapRecordService(this.idList, state => { this.tableInfo.loading = state })
      if (res) {
        const { detailList } = res.retData;
        this.tableInfo.list = detailList;
      }
    },
    scrapNumChange (row) {
      row.scrapAmount = (+(Math.round(row.scrapNum * row.costPrice + 'e' + 2) + 'e-' + 2)).toFixed(2);
    },
    async handleSubmit () {
      if (this.idList.length === 0) {
        return this.$message.error('请选择数据');
      }
      // 校验
      var isRet = false;
      for (let detailObj of this.tableInfo.list) {
        if (!detailObj.scrapNum || detailObj.scrapNum<0 || detailObj.scrapNum > detailObj.canSendAmount) {
          isRet = true;
          break;
        }
      }
      if (!isRet) {
        const res = await commitScrapRecordToOaService(this.tableInfo.list, state => { this.confirmLoading = state })
        if (res) {
          this.$message.success('提交成功');
          this.handleBack();
        }
      } else {
        this.$message.error('【预计报废数量】必须大于0，并且不能大于可售库存数量!')
      }
    },
    handleBack () {
      this.$router.push({ name: 'stockOverflow', query: { processingStatus: ['3'], processingType: '18' } })
    }
  }
};
</script>
